<template>
  <div
    class="apple-input-wrapper"
    :class="[
      `apple-input--${size}`,
      {
        'apple-input--focused': isFocused,
        'apple-input--error': error || errorMessage,
        'apple-input--disabled': disabled,
        'apple-input--with-prefix': $slots.prefix,
        'apple-input--with-suffix': $slots.suffix || clearable
      }
    ]"
  >
    <div v-if="$slots.label || label" class="apple-input__label">
      <slot name="label">{{ label }}</slot>
    </div>
    
    <div class="apple-input__container">
      <div v-if="$slots.prefix" class="apple-input__prefix">
        <slot name="prefix"></slot>
      </div>
      
      <input
        v-if="type !== 'textarea'"
        ref="inputRef"
        :type="type"
        :value="modelValue"
        :placeholder="placeholder"
        :disabled="disabled"
        :readonly="readonly"
        :maxlength="maxlength"
        class="apple-input__inner"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        @change="handleChange"
        @keydown="handleKeydown"
      />
      
      <textarea
        v-else
        ref="inputRef"
        :value="modelValue"
        :placeholder="placeholder"
        :disabled="disabled"
        :readonly="readonly"
        :maxlength="maxlength"
        :rows="rows"
        class="apple-input__inner apple-input__textarea"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        @change="handleChange"
      ></textarea>
      
      <div v-if="$slots.suffix || clearable" class="apple-input__suffix">
        <span
          v-if="clearable && modelValue && !disabled && !readonly"
          class="apple-input__clear"
          @click="handleClear"
        >
          <!-- 清除图标 - 可根据实际使用的图标库修改 -->
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="15" y1="9" x2="9" y2="15"></line>
            <line x1="9" y1="9" x2="15" y2="15"></line>
          </svg>
        </span>
        <slot name="suffix"></slot>
      </div>
    </div>
    
    <div v-if="errorMessage" class="apple-input__error-message">
      {{ errorMessage }}
    </div>
    
    <div v-if="$slots.help || helpText" class="apple-input__help-text">
      <slot name="help">{{ helpText }}</slot>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: ''
  },
  type: {
    type: String,
    default: 'text'
  },
  placeholder: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  },
  clearable: {
    type: Boolean,
    default: false
  },
  size: {
    type: String,
    default: 'md',
    validator: (value) => ['sm', 'md', 'lg'].includes(value)
  },
  maxlength: {
    type: [String, Number],
    default: null
  },
  label: {
    type: String,
    default: ''
  },
  error: {
    type: Boolean,
    default: false
  },
  errorMessage: {
    type: String,
    default: ''
  },
  helpText: {
    type: String,
    default: ''
  },
  rows: {
    type: [String, Number],
    default: 3
  },
  autofocus: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'change', 'clear', 'keydown']);

const inputRef = ref(null);
const isFocused = ref(false);

const handleInput = (event) => {
  emit('update:modelValue', event.target.value);
};

const handleFocus = (event) => {
  isFocused.value = true;
  emit('focus', event);
};

const handleBlur = (event) => {
  isFocused.value = false;
  emit('blur', event);
};

const handleChange = (event) => {
  emit('change', event.target.value);
};

const handleClear = () => {
  emit('update:modelValue', '');
  emit('clear');
  // 聚焦回输入框
  inputRef.value?.focus();
};

const handleKeydown = (event) => {
  emit('keydown', event);
};

// 自动聚焦
if (props.autofocus) {
  nextTick(() => {
    inputRef.value?.focus();
  });
}
</script>

<style scoped>
.apple-input-wrapper {
  position: relative;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  margin-bottom: var(--spacing-md);
}

.apple-input__label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--apple-text-secondary-light);
  transition: color var(--animation-speed-fast) var(--ease-apple);
}

.apple-input__container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: var(--apple-input-bg-light);
  border: 1px solid var(--apple-border-light);
  border-radius: var(--input-border-radius);
  transition: all var(--animation-speed-fast) var(--ease-apple);
  overflow: hidden;
}

.apple-input__inner {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--apple-text-primary-light);
  font-size: var(--font-size-md);
  font-family: inherit;
  padding: 0 var(--spacing-md);
  border-radius: var(--input-border-radius);
}

.apple-input__inner::placeholder {
  color: var(--apple-text-placeholder-light);
}

.apple-input__prefix,
.apple-input__suffix {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--apple-text-secondary-light);
  padding: 0 var(--spacing-sm);
}

.apple-input__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--apple-text-tertiary-light);
  transition: color var(--animation-speed-fast) var(--ease-apple);
}

.apple-input__clear:hover {
  color: var(--apple-text-secondary-light);
}

.apple-input__clear svg {
  width: 16px;
  height: 16px;
}

.apple-input__error-message {
  font-size: var(--font-size-xs);
  color: var(--apple-danger);
  margin-top: var(--spacing-xs);
}

.apple-input__help-text {
  font-size: var(--font-size-xs);
  color: var(--apple-text-tertiary-light);
  margin-top: var(--spacing-xs);
}

/* 尺寸变体 */
.apple-input--sm .apple-input__container {
  height: 32px;
}

.apple-input--sm .apple-input__inner {
  font-size: var(--font-size-sm);
}

.apple-input--md .apple-input__container {
  height: 40px;
}

.apple-input--lg .apple-input__container {
  height: 48px;
}

.apple-input--lg .apple-input__inner {
  font-size: var(--font-size-lg);
}

/* 文本域 */
.apple-input__textarea {
  padding: var(--spacing-sm) var(--spacing-md);
  resize: vertical;
  min-height: 80px;
  line-height: var(--line-height-relaxed);
}

.apple-input--sm .apple-input__textarea,
.apple-input--md .apple-input__textarea,
.apple-input--lg .apple-input__textarea {
  height: auto;
}

/* 状态样式 */
.apple-input--focused .apple-input__container {
  border-color: var(--apple-primary);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

.apple-input--focused .apple-input__label {
  color: var(--apple-primary);
}

.apple-input--error .apple-input__container {
  border-color: var(--apple-danger);
}

.apple-input--error.apple-input--focused .apple-input__container {
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.15);
}

.apple-input--error .apple-input__label {
  color: var(--apple-danger);
}

.apple-input--disabled .apple-input__container {
  background-color: var(--apple-input-disabled-bg-light);
  border-color: var(--apple-border-light);
  opacity: 0.6;
  cursor: not-allowed;
}

.apple-input--disabled .apple-input__inner {
  cursor: not-allowed;
  color: var(--apple-text-tertiary-light);
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  .apple-input__label {
    color: var(--apple-text-secondary-dark);
  }
  
  .apple-input__container {
    background-color: var(--apple-input-bg-dark);
    border-color: var(--apple-border-dark);
  }
  
  .apple-input__inner {
    color: var(--apple-text-primary-dark);
  }
  
  .apple-input__inner::placeholder {
    color: var(--apple-text-placeholder-dark);
  }
  
  .apple-input__prefix,
  .apple-input__suffix {
    color: var(--apple-text-secondary-dark);
  }
  
  .apple-input__clear {
    color: var(--apple-text-tertiary-dark);
  }
  
  .apple-input__clear:hover {
    color: var(--apple-text-secondary-dark);
  }
  
  .apple-input__help-text {
    color: var(--apple-text-tertiary-dark);
  }
  
  .apple-input--disabled .apple-input__container {
    background-color: var(--apple-input-disabled-bg-dark);
    border-color: var(--apple-border-dark);
  }
  
  .apple-input--disabled .apple-input__inner {
    color: var(--apple-text-tertiary-dark);
  }
  
  .apple-input--focused .apple-input__container {
    border-color: var(--apple-primary-light);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.25);
  }
  
  .apple-input--focused .apple-input__label {
    color: var(--apple-primary-light);
  }
}
</style> 